/*
*@date:20180902
*@author: wj 
*@description: 按YLJ的接口文档《测试接口文档.docx》，1.读取驾驶人基本信息 底层cmd：02C20
*              2.读取驾驶人照片信息，底层cmd： 02C05
*@debug        20180907 读取驾驶人照片信息，底层cmd： 02C05 -- 通过放置静态文件在tomcatimages下得到图片
*@changelog:   20180917 开始数据校验和匹配
*/

<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"></app-title>
        <app-notes>通过身份证明号码读取驾驶员基本信息，并查看照片</app-notes>
        <el-row>
            <el-col :span="20">
                <app-search>
                    <el-form :inline="true" :model="searchForm" :rules="searchRules" ref="searchForm">
                        <el-form-item prop="sfzmhm">
                            <el-input v-model="searchForm.sfzmhm" placeholder="请输入身份证明号码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </app-search>
            </el-col>
        </el-row>    
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column label="照片" width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.imageurl" width="100" height="100"/>
                </template>
                </el-table-column>
                <el-table-column label="姓名" width="180" prop="xm"></el-table-column>
                <el-table-column label="姓别" width="180" prop="xb"></el-table-column>
                <el-table-column label="出生日期" width="180" prop="csrq"></el-table-column>
                <el-table-column label="身份证明名称" width="180" prop="sfzmmc"></el-table-column>
                <el-table-column label="身份证明号码" width="180" prop="sfzmmc"></el-table-column>
                <el-table-column label="手机号码" width="180" prop="sjhm"></el-table-column>
                <el-table-column label="国籍" width="80" prop="gj"></el-table-column>
                <el-table-column label="登记住所行政区划" width="180" prop="djzsxzqh"></el-table-column>
                <el-table-column label="登记住所详细地址" width="180" prop="djzsxxdz"></el-table-column>



            </el-table>
            <el-alert :title="errorMsg" type="warning" :closable="false" show-icon v-show="!reliable"> </el-alert>
    </div>
</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>

<script>
export default {
    data(){
        return {
            url:  '../../trffweb/services/TmriOutAccess/queryObjectOut1.shtml',
            url2: '../../trffweb/services/TmriOutAccess/queryObjectOut2.shtml',
            picurl: window.axios_g.BASEURL,
            dialogTitle:"驾驶员基本信息查询",
            loading: false,
            picpath: '',
            tableDataTemp: [],
            tableData:[],
            errorMsg:"您的信息有误，请联系管理员修改",
            reliable:true,
            searchForm: {               
                sfzmhm: '' 
            },
            searchForm2: {
                sfzmhm: '' 
            },

             searchRules: {
                sfzmhm: [
                    { required:true, message: '请输入身份证号', trigger: 'blur' },
                    {min: 18, max: 18, message: '请输入18位身份证号', trigger: 'blur'}
                ]
            }

       }
    },
    mounted(){
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
          if(this.reliable === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        //先取图片path，再取数据
        search(){
            this.$refs.searchForm.validate((valid)=>
            {
                if(valid){
                    this.searchForm2.sfzmhm = this.searchForm.sfzmhm,
                        this.HTTP.methods.apiPost(this.url2, this.searchForm2).then(res =>
                        {
                            if(res.code != 200){
                                this.$message({
                                message: res.msg,
                                type: 'error'
                                })                              
                            }else{
                            // this.tableData = res.data
                            // 本来是通过此接口取图片，但是图片暂时用静态替代了，在前面post请求就处理完成，所以这里就至空了。
                                if(res.data.length > 0)
                                {
                                    this.picpath = this.picurl.substring(0,this.picurl.indexOf('8282') + 5) + 'pic_file/' + res.data[0].name + '.jpg'
                                    //console.log(this.picurl)
                                    //console.log(picpath)
                                }else{
                                    return
                                }
                                this.loading = false
                            }
                    })
                    .then(
                        this.HTTP.methods.apiPost(this.url, this.searchForm).then(res =>
                        {
                            if(res.code != 200){
                                this.$message({
                                message: res.msg,
                                type: 'error'
                                })                              
                            }else{
                                this.tableData = res.data
                                for(var i in this.tableData) {
                                        this.tableData[i].imageurl =  this.picpath 
                                }
                                this.loading = false
                            }
                        })   
                    )                 
                }
            })                
        }
    }
}
</script>

    
